
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>123</title>
</head>
<link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
<script src="${path}/js/jquery.min.js"></script>
<script src="${path}/layui/layui.js"></script>
<body>
<br>
<h1 style="text-align: center">会员信息记录</h1>
<hr>
<form class="layui-form" action="" style="margin-top: 30px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">会员名</label>
            <div class="layui-input-inline" style="width: 200px;">
                <input id="username" type="text"  name="name" autocomplete="off" class="layui-input">
            </div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline" style="width: 300px;">
                <select name="" id="roles">
                    <option value="-1">全部</option>
                </select>
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <button type="button" class="layui-btn layui-btn-normal" onclick="SearchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>

    </div>
</form>
    <table class="layui-table" lay-data="{id:'vipTable',url:'${path}/jilu/list', page:true,toolbar:'#toolbarDemo',defaultToolbar: ['filter', 'print', 'exports'],even: true}"
           lay-filter="vipTable">
        <thead>
        <tr>
            <th lay-data="{type:'checkbox'}"></th>
            <th lay-data="{field:'name'}">会员名称</th>
            <th lay-data="{field:'time'}">时间</th>
            <th lay-data="{templet:'#card'}">会员卡</th>
            <th lay-data="{templet:'#people'}">操作人</th>
            <th lay-data="{templet:'#type'}">状态</th>
        </tr>
        </thead>
    </table>
</body>
<script>
    $.get("${path}/jilu/seach",function (data) {
        $.each(data,function () {
            var opt=$("<option></option>").appendTo("#roles");
            opt.text(this.name).val(this.id);
        })
    })
    function SearchData() {
        layui.table.reload("vipTable",{
            page:{
                curr:1
            },
            where:{
                "name":$("#username").val(),
                "type":$("#roles").val()
            }
        })
    }
    layui.use(["table","form"],function() {
        var table = layui.table;
        table.on('toolbar(vipTable)',function (obj) {
            switch (obj.event) {
                case "batchDelete":
                    var rows = table.checkStatus('vipTable');
                    var data = rows.data;
                    if(data.length == 0){
                        layer.msg("请选择要删除的数据",function(){});
                        return;
                    }
                    layer.confirm('确定要删除这么多数据吗？',{icon:5,title:'友情提示'},function (index) {
                        var params = "";
                        for(let vipTable of data){
                            params += "ids="+vipTable.id+"&";
                        }
                        $.post('${path}/jilu/batchDelete',params,function () {
                            layer.close(index);
                            table.reload('vipTable');
                        });
                    });
                    break;
            }
        })
    })
</script>
<script type="text/html" id="card">
    {{d.vipType.name}}
</script>
<script type="text/html" id="people">
    {{d.admin.name}}
</script>
<script type="text/html" id="type">
    {{d.jilu.name}}
</script>
<%--导航按钮--%>
<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete"><i class="layui-icon layui-icon-delete"></i> 批量删除</button>
</script>
</html>
